import React, { useState } from 'react';
import Modal from 'react-bootstrap/Modal';

const BaseModal: React.FC<{ 
    title: string, 
    body: React.ReactNode,
    footer?: React.ReactNode,
    onClose?: () => void
}> = (props) => {
    const [show, setShow] = useState(true);
    const handleClose = () => {
        setShow(false);
        props.onClose!();
    };
    return (
        <>
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                    <Modal.Title>{props.title}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {props.body}
                </Modal.Body>
                {
                    props.footer && (
                        <Modal.Footer>
                            {props.footer}
                        </Modal.Footer>
                    )
                }
            </Modal>
        </>
    );
}

export default BaseModal;